<template>
  <div class="app-container">
    <!-- <div class="linebtn">
      <div class="btn select">AI知识库</div>
      <div class="btn" @click="golink('/moment/like','like')">违规词监测</div>
    </div> -->
    <ai_nabar style="margin: 10px 0 10px 0px;" index="0"></ai_nabar>
    
    <el-form :model="queryParams" class="frominfo" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <div class="from-item">
          <el-form-item label="文件名称" prop="wcId">
            <el-input v-model="queryParams.wcId" @keyup.enter.native="handleQuery" placeholder="文件名称" clearable/>
          </el-form-item>
          <el-form-item label="文件类型" prop="wcUserId">
            <el-select v-model="queryParams.wxLabel" placeholder="请选择" clearable>
              <el-option v-for="dict in dict.sys_friend_proport" :key="dict.value" :label="dict.label" :value="dict.value"/>
            </el-select>
          </el-form-item>
          <el-form-item label="添加时间" prop="likeState">
            <el-date-picker v-model="chatTime" style="width: 240px" value-format="yyyy-MM-dd" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
          </el-form-item>
      </div>
      <div class="from-Btn">
        <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </div>
    </el-form>

  <el-row :gutter="10" class="mb8">
    <el-col :span="1.5">
      <el-button type="success" style="background-color: #0078fb;color: #fff;border-color: #0078fb;" icon="el-icon-download" size="mini" @click="handleAdd">导入文件</el-button>
    </el-col>
    <el-col :span="1.5">
      <el-button type="success" style="background-color: #0078fb;color: #fff;border-color: #0078fb;" icon="el-icon-folder-delete" size="mini" @click="handleUpdate">批量删除</el-button>
    </el-col>
    <el-col :span="1.5">
      <el-button type="success" style="background-color: #0078fb;color: #fff;border-color: #0078fb;" icon="el-icon-upload2" size="mini" @click="handleUpdate">批量导出</el-button>
    </el-col>
  </el-row>


  <el-table v-loading="loading" :data="wcMomentsList" @selection-change="handleSelectionChange" :header-cell-style="{ background: '#fcfcfd', color: '#000' }" :border="false">
    <el-table-column type="selection" width="55" align="center" :show-overflow-tooltip="true"/>
    <el-table-column label="文件名称" prop="wcId" align="center" :show-overflow-tooltip="true"/>
    
    <el-table-column label="类型" prop="wcUserId" align="center" :show-overflow-tooltip="true"/>
    <el-table-column label="大小" prop="likeState" align="center" :show-overflow-tooltip="true"/>
    <el-table-column label="添加时间" prop="releaseTime" align="center" :show-overflow-tooltip="true" width="180">
        <template slot-scope="scope">
            <span>{{ parseTime(scope.row.releaseTime, '{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
    </el-table-column>
    <el-table-column align="center" width="120" class-name="small-padding fixed-width">
      <template slot="header">
        <span>文件详情</span>
        <el-tooltip class="item" effect="dark" content="进入查看文件详情" placement="top">
          <i class="el-icon-warning" style="color:#818e96;"></i>
        </el-tooltip>
      </template>
      <template>
        <el-button type="warning" style="background-color: #fb9d52;color: #fff;width: 50px;" icon="el-icon-circle-close" size="mini">删除</el-button>
        <el-button type="warning" style="background-color: #fb9d52;color: #fff;width: 50px;" icon="el-icon-document" size="mini" @click="golink">详情</el-button>
      </template>
    </el-table-column>
  </el-table>
  <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList"/>
   <!-- 添加或修改微信群成员对话框 -->
   <el-dialog :title="title" :visible.sync="open" width="960px" append-to-body>
      <div class="dia-box">
        <span style="font-size: 14px;margin-right: 10px;line-height: 40px;">我的文件</span>
        <div style="display: flex;">
            <div style="width:40%;display: flex;flex-direction: column;">
              <el-upload
                class="upload-demo"
                drag
                action="https://jsonplaceholder.typicode.com/posts/"
                multiple>
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
              </el-upload>
            </div>
            <div style="width:10%;display: flex;justify-content: center;margin-top: 80px;">
              <img style="width: 40px;height: 40px;" src="../../../assets/images/chuanshu.png"/>
            </div>
            <div style="width: 45%;">
              <el-table :data="fileList" @selection-change="handleSelectionChange" :header-cell-style="{ background: '#fcfcfd', color: '#000'}" :border="false">
                <el-table-column type="selection" width="50" align="center" :show-overflow-tooltip="true"/>
                <el-table-column label="文件名称" width="75" prop="wcId" align="center" :show-overflow-tooltip="true"/>
                
                <el-table-column label="类型" width="75" prop="wcUserId" align="center" :show-overflow-tooltip="true"/>
                <el-table-column label="大小" width="65" prop="likeState" align="center" :show-overflow-tooltip="true"/>
                <el-table-column label="导入时间" prop="releaseTime" align="center" :show-overflow-tooltip="true" width="100">
                    <template slot-scope="scope">
                        <span>{{ parseTime(scope.row.releaseTime, '{y}-{m}-{d} {h}:{i}') }}</span>
                    </template>
                </el-table-column>
              </el-table>
            </div>
        </div>

        <div style="width:40%;display: flex;flex-direction: column;text-align: center;">
          <span style="font-size: 16px;font-weight: 550;margin: 15px 0;">OR</span>
          <div style="display: flex;">
            <el-input v-model="url" placeholder="请输入链接"></el-input>
            <div class="dia-btn">上传链接</div>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" style="margin-right: 40px;" @click="submitForm">上 传</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import ai_nabar from '../components/ai_nabar.vue'
import request from '@/utils/request'
export default {
  components:{
    ai_nabar
  },
  name: "WcGroupsInfo",
  dicts: ['sys_friend_proport'],
  data() {
    return {
      url:'',
    // 遮罩层
    loading: true,
    // 选中数组
    ids: [],
    // 非单个禁用
    single: true,
    // 非多个禁用
    multiple: true,
    // 显示搜索条件
    showSearch: true,
    // 总条数
    total: 0,
    // 微信朋友圈信息表格数据
    wcMomentsList: [],
    // 弹出层标题
    title: "",
    // 是否显示弹出层
    open: false,
    chatTime:[],
    // 查询参数
    queryParams: {
      pageNum: 1,
      pageSize: 10,
      wcId: null,
      wcUserId: null,
      likeState: null,
      releaseDetail: null,
      releaseTime: null,
    },
    fileList:[],
    // 表单参数
    form: {},
    // 表单校验
    rules: {
      wcId: [
        { required: true, message: "微信用户id不能为空", trigger: "blur" }
      ],
      wcUserId: [
        { required: true, message: "好友微信ID不能为空", trigger: "blur" }
      ],
    }
    };
  },
  created() {
    this.loading = false;
  //this.getList();
  },
methods: {
  golink(url,name){
    this.$router.push({ path:url,name}).catch(()=>{});
  },
  /** 查询微信朋友圈信息列表 */
  getList() {
    this.loading = true;
    listWcMoments(this.queryParams).then(res => {
      if (res['success']) {
        const dt = res['data'];
        this.total = dt['total'];
        this.wcMomentsList = dt['records'];
      }
      this.loading = false;
    });
  },
  // 取消按钮
  cancel() {
    this.open = false;
    this.reset();
  },
  // 表单重置
  reset() {
    this.form = {
      id: null,
      wcId: null,
      wcUserId: null,
      likeState: null,
      releaseDetail: null,
      releaseTime: null,
      remark: null,
      createBy: null,
      createTime: null,
      updateBy: null,
      updateTime: null,
      delFlag: null
    };
    this.resetForm("form");
  },
  /** 搜索按钮操作 */
  handleQuery() {
    this.queryParams.pageNum = 1;
    this.getList();
  },
  /** 重置按钮操作 */
  resetQuery() {
    this.resetForm("queryForm");
    this.handleQuery();
  },
  // 多选框选中数据
  handleSelectionChange(selection) {
    this.ids = selection.map(item => item.id)
    this.single = selection.length!==1
    this.multiple = !selection.length
  },
  /** 新增按钮操作 */
  handleAdd() {
    this.reset();
    this.open = true;
    this.title = "文件上传";
  },
  /** 修改按钮操作 */
  handleUpdate(row) {
    this.reset();
    const id = row.id || this.ids;
    getWcMoments(id).then(response => {
      this.form = response.data;
      this.open = true;
      this.title = "修改微信朋友圈信息";
    });
  },
  /** 提交按钮 */
  submitForm() {
    this.$refs["form"].validate(valid => {
      if (valid) {
        if (this.form.id != null) {
          updateWcMoments(this.form).then(response => {
            this.$modal.msgSuccess("修改成功");
            this.open = false;
            this.getList();
          });
        } else {
          addWcMoments(this.form).then(response => {
            this.$modal.msgSuccess("新增成功");
            this.open = false;
            this.getList();
          });
        }
      }
    });
  },
  /** 删除按钮操作 */
  handleDelete(row) {
    const ids = row.id || this.ids;
    this.$modal.confirm('是否确认删除微信朋友圈信息编号为"' + ids + '"的数据项？').then(function() {
      return delWcMoments(ids);
    }).then(() => {
      this.getList();
      this.$modal.msgSuccess("删除成功");
    }).catch(() => {});
  },
  /** 导出按钮操作 */
  handleExport() {
    this.download('sk-module-Moments/wcMoments/export', {
      ...this.queryParams
    }, `wcMoments_${new Date().getTime()}.xlsx`)
  }
}
};

/** js请求 调用 */

// 查询微信朋友圈信息列表
export function listWcMoments(query) {
return request({
  url: '/sk-module-Moments/wcMoments/page',
  method: 'get',
  params: query
})
}

// 查询微信朋友圈信息详细
export function getWcMoments(id) {
return request({
  url: '/sk-module-Moments/wcMoments/queryById/' + id,
  method: 'get'
})
}

// 新增微信朋友圈信息
export function addWcMoments(data) {
return request({
  url: '/sk-module-Moments/wcMoments/add',
  method: 'post',
  data: data
})
}

// 修改微信朋友圈信息
export function updateWcMoments(data) {
return request({
  url: '/sk-module-Moments/wcMoments/edit',
  method: 'put',
  data: data
})
}

// 删除微信朋友圈信息
export function delWcMoments(id) {
return request({
  url: '/sk-module-Moments/wcMoments/delete/' + id,
  method: 'delete'
})
}

</script>
<style scoped lang="scss">
  .app-container{
    background-color: #f6f9fb;
  }
  .frominfo{
    display: flex;background-color: #fff;padding: 10px;padding-bottom: 0; margin-bottom: 20px;
    .from-item{
      display: flex;flex-wrap: wrap;
    }
    .from-Btn{
      display: flex;flex-direction: column;align-items: center;justify-content: center;width: 20%;
    }
  }
  .linebtn{
        display: flex;
        margin: -10px 0 10px 5px;
        height: 38px;
        .btn{
            width: 110px;
            text-align: center;
            line-height: 38px;
            font-size: 14px;
            color: #8c8c8c;
            margin-right: 10px;
            border: 1px solid #eaeff2;
            background-color: #fff;
            border-radius: 5px;
            .link-type{
              color: #8c8c8c;
            }
        }
        .select{
            background-color: #eaf6ff;
            border:1px solid #288dfc;
            color: #288dfc;
            font-weight: 550;
        }
  }
  .dia-box{
    margin-top: -20px;
    padding: 0 20px 20px 20px;
    display: flex;
    flex-direction: column;
  }
  .dialog-footer{
    display: flex;
    justify-content: center;
  }
  .upload-demo{
    width: 200px;
    display: flex;
    flex-direction: column;
  }
  .dia-btn{
        width: 90px;
        text-align: center;
        line-height: 35px;
        font-size: 14px;
        margin-right: 10px;
        border-radius: 5px;
        background-color: #eaf6ff;
        border:1px solid #288dfc;
        color: #288dfc;
        margin-left: 5px;
  }
</style>